<ng-container *ngIf="view?.metadata.type">
  <ng-container [ngSwitch]="view.metadata?.type">
    <ng-container *ngSwitchCase="'annotations'">
      <app-view-annotations [view]="view"></app-view-annotations>
    </ng-container>
    <ng-container *ngSwitchCase="'buttonGroup'">
      <app-button-group [view]="view"></app-button-group>
    </ng-container>
    <ng-container *ngSwitchCase="'card'">
      <app-view-card [view]="view"></app-view-card>
    </ng-container>
    <ng-container *ngSwitchCase="'cardList'">
      <app-view-card-list [view]="view"></app-view-card-list>
    </ng-container>
    <ng-container *ngSwitchCase="'containers'">
      <app-view-containers [view]="view"></app-view-containers>
    </ng-container>
    <ng-container *ngSwitchCase="'codeBlock'">
      <app-view-code [view]="view"></app-view-code>
    </ng-container>
    <ng-container *ngSwitchCase="'donutChart'">
      <app-view-donut-chart [view]="view"></app-view-donut-chart>
    </ng-container>
    <ng-container *ngSwitchCase="'editor'">
      <app-view-editor [view]="view"></app-view-editor>
    </ng-container>
    <ng-container *ngSwitchCase="'expressionSelector'">
      <app-view-expression-selector
        [view]="view"
      ></app-view-expression-selector>
    </ng-container>
    <ng-container *ngSwitchCase="'graphviz'">
      <app-view-graphviz [view]="view"></app-view-graphviz>
    </ng-container>
    <ng-container *ngSwitchCase="'flexlayout'">
      <app-view-flexlayout [view]="view"></app-view-flexlayout>
    </ng-container>
    <ng-container *ngSwitchCase="'labels'">
      <app-view-labels [view]="view"></app-view-labels>
    </ng-container>
    <ng-container *ngSwitchCase="'labelSelector'">
      <app-view-label-selector [view]="view"></app-view-label-selector>
    </ng-container>
    <ng-container *ngSwitchCase="'loading'">
      <app-view-loading [view]="view"></app-view-loading>
    </ng-container>
    <ng-container *ngSwitchCase="'error'">
      <app-view-error [view]="view"></app-view-error>
    </ng-container>
    <ng-container *ngSwitchCase="'iframe'">
      <app-iframe [view]="view"></app-iframe>
    </ng-container>
    <ng-container *ngSwitchCase="'link'">
      <app-view-link [view]="view"></app-view-link>
    </ng-container>
    <ng-container *ngSwitchCase="'list'">
      <app-view-list [view]="view"></app-view-list>
    </ng-container>
    <ng-container *ngSwitchCase="'logs'">
      <app-logs [view]="view"></app-logs>
    </ng-container>
    <ng-container *ngSwitchCase="'podStatus'">
      <app-pod-status [view]="view"></app-pod-status>
    </ng-container>
    <ng-container *ngSwitchCase="'portforward'">
      <app-view-port-forward [view]="view"></app-view-port-forward>
    </ng-container>
    <ng-container *ngSwitchCase="'ports'">
      <app-view-ports [view]="view"></app-view-ports>
    </ng-container>
    <ng-container *ngSwitchCase="'quadrant'">
      <app-view-quadrant [view]="view"></app-view-quadrant>
    </ng-container>
    <ng-container *ngSwitchCase="'resourceViewer'">
      <app-view-resource-viewer [view]="view"></app-view-resource-viewer>
    </ng-container>
    <ng-container *ngSwitchCase="'selectors'">
      <app-view-selectors [view]="view"></app-view-selectors>
    </ng-container>
    <ng-container *ngSwitchCase="'singleStat'">
      <app-single-stat [view]="view"></app-single-stat>
    </ng-container>
    <ng-container *ngSwitchCase="'summary'">
      <app-view-summary [view]="view"></app-view-summary>
    </ng-container>
    <ng-container *ngSwitchCase="'table'">
      <app-view-datagrid [view]="view"></app-view-datagrid>
    </ng-container>
    <ng-container *ngSwitchCase="'text'">
      <app-view-text [view]="view"></app-view-text>
    </ng-container>
    <ng-container *ngSwitchCase="'timestamp'">
      <app-view-timestamp [view]="view"></app-view-timestamp>
    </ng-container>
    <ng-container *ngSwitchCase="'yaml'">
      <app-view-yaml [view]="view"></app-view-yaml>
    </ng-container>
    <ng-container *ngSwitchCase="'terminal'">
      <app-terminal [view]="view"></app-terminal>
    </ng-container>
    <div class="alert alert-danger static" *ngSwitchDefault>
      <span class="alert-icon-wrapper">
        <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
      </span>
      <span class="alert-text"> {{ view.metadata.type }} not implemented </span>
    </div>
  </ng-container>
</ng-container>
